<template>
  <view class="ikz-picker">
    <picker
      mode="multiSelector"
      :value="multiIndex"
      :range="multiArray"
      @nodeclick="bindTimeChange"
      @change="bindTimeChange"
    >
      <view class="picker">
        {{ multiArray[0][multiIndex[0]] }} {{ multiArray[1][multiIndex[1]] }}
      </view>
    </picker>
  </view>
</template>

<script>
const initialTimeSlots = [
  "6:00-6:30",
  "6:30-7:00",
  "7:00-7:30",
  "7:30-8:00",
  "8:00-8:30",
  "8:30-9:00",
  "9:00-9:30",
  "9:30-10:00",
  "10:00-10:30",
  "10:30-11:00",
  "11:00-11:30",
  "11:30-12:00",
  "12:00-13:30",
  "12:30-13:00",
  "13:00-13:30",
  "13:30-14:00",
  "14:00-14:30",
  "14:30-15:00",
  "15:00-16:30",
  "16:30-17:00",
  "17:00-17:30",
  "17:30-18:00",
  "18:00-18:30",
  "18:30-19:00",
  "19:00-19:30",
  "19:30-20:00",
  "20:00-20:30",
  "20:30-21:00",
  "21:00-21:30",
  "21:30-22:00",
  "22:00-22:30",
  "22:30-23:00",
];
export default {
  name: "screen",
  props: {
    showData: {
      type: Object,
    },
  },
  data() {
    return {
      multiArray: [["今天"], this.generateTimeSlots()],
      multiIndex: [0, 0],
    };
  },
  mounted() {
    var e = {
      detail: {
        value: this.multiIndex,
      },
    };
    this.bindTimeChange(e);
  },
  methods: {
    generateTimeSlots() {
      const now = new Date();
      const startTime = new Date(now.getTime() + 40 * 60000); // 当前时间 + 40分钟
      const slots = [];

      // 生成从 startTime 开始的时间段
      let currentTime = startTime;
      while (
        currentTime.getHours() < 23 ||
        (currentTime.getHours() === 23 && currentTime.getMinutes() <= 30)
      ) {
        const endTime = new Date(currentTime.getTime() + 30 * 60000); // 每段30分钟
        slots.push(
          `${currentTime.getHours()}:${String(
            currentTime.getMinutes()
          ).padStart(2, "0")}-${endTime.getHours()}:${String(
            endTime.getMinutes()
          ).padStart(2, "0")}`
        );
        currentTime = endTime;
      }
      console.log(slots,'slotsslots')
      return slots;
    },
    bindTimeChange(e) {
      console.log(111);
      this.multiIndex = e.detail.value;
      this.multiArray[1] = this.generateTimeSlots(); // 始终使用动态生成的时间
      this.$emit(
        "returnTime",
        this.GetDateStr(0) + " " + this.multiArray[1][this.multiIndex[1]] // 日期始终为今天
      );
    },
    GetDateStr(AddDayCount) {
      var dd = new Date();
      dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1; //获取当前月份的日期
      var d = dd.getDate();
      return y + "-" + m + "-" + d;
    },
    closeScreen() {
      this.$emit("closeScreen", false);
      this.show_info.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.ikz-picker {
  width: 100%;
}
.picker {
  width: 100%;
}
</style>
